<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
    <title>前端</title>
</head>
<body>

    <div id='app'>
            <button v-on:click="get_data">获取</button>
            <ul>
                <li v-for='data in heros'>
                    {{data.id}}
                    {{data.hname}}
                    {{data.gender}}
                </li>
            </ul>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                heros:[]
            },
            methods:{
                get_data:function(){
                    axios.get('http://127.0.0.1:8000/heros')
                    .then((response) => {
                        this.heros = response.heros
                    })
                    .catch((errors) =>{
                        alert(erros.errors)
                    })
                }
               
            }
        })


    </script>
</body>
</html>